<template>
    <div>
        <AddTodo @addTodo="addTodo"></AddTodo>
        <ShowTodo :data="todoList" @itemChange="itemChange"></ShowTodo>
        <FooterTodo 
            :allData = "footerData"
            @clearTodo="clearTodo"
            @allSeclet="allSeclet">
        </FooterTodo>
    </div>
</template>
<!--  :comTodoCount="comTodoCount" 
            :todoCount="todoCount" 
            :allData = "allData" -->
<script setup>
import AddTodo from '../components/AddTodo.vue'
import ShowTodo from '../components/ShowTodo.vue'
import FooterTodo from '../components/FooterTodo.vue'
import { ref ,reactive} from 'vue'


const todoList = ref([])
// 传递给组件FooterTodo 的数据
const footerData = reactive({
    // 全选的状态
    allState: ref(false),
    // 任务总数量
    todoCount : 0,
    // 被勾选的任务数量
    comTodoCount :0
})

function addTodo(totaName){
    // 添加新任务
    console.log("接收到的新任务名称", totaName);
    todoList.value.push({
        name:totaName.value,
        isCheck:false,
    })
    console.log("更新后的数组", todoList);
    // 统计任务的总数量
    footerData.todoCount = todoList.value.length
}

function itemChange(todoName){
    footerData.comTodoCount = 0
    // 修改任务的勾选状态
    console.log("收到需要改变状态的任务名称是", todoName);
    todoList.value.filter((item)=>{
        console.log("数组的每一项", item);
        if(item.name === todoName){
            item.isCheck = !item.isCheck
            console.log("改变后数组的一项", item);
        }
        if(item.isCheck){
            // 统计被勾选的任务的数量
            footerData.comTodoCount++
        }
    })
    console.log("改变后的数组", todoList.value);
    // 所有的任务都被勾选, 通知FooterTodo 组件
    // if(comTodoCount.value === todoCount.value){
    //     allState.value =true
    // } else{
    //     allState.value =false
    // }
    footerData.allState = footerData.comTodoCount === footerData.todoCount
}

function allSeclet(isAll){
    // 点击了全选按钮, 将所有任务的状态变成 true
    for(let item of todoList.value){
        item.isCheck = isAll
    }
    footerData.allState = isAll
    // 由于在这里修改了任务的状态 所以需要重新统计被勾选的任务的数量
    computeTodoCount()
}

function clearTodo(){
    console.log("删除已勾选的任务");
    // 过滤出已勾选的所有任务  并且删除
    todoList.value = todoList.value.filter((item)=>{
        return !item.isCheck
    })
    console.log("过滤后的数据是", todoList.value);
    // 由于在这里修改了任务的状态 所以需要重新统计被勾选的任务的数量
    computeTodoCount()
}

/**
 * 计算被勾选的任务数量和总任务数量
 */
function computeTodoCount(){
    footerData.comTodoCount = 0
    for(let item of todoList.value){
        if (item.isCheck) {
            footerData.comTodoCount++
        }
    }
    footerData.todoCount = todoList.value.length
    if (todoList.value.length === 0) {
        footerData.allState = false
    }
}

</script>

<style scoped>

</style>